5章 Trubo Streamによるリアルタイム更新 | Turbo Rails チュートリアル

この章では、Turbo StreamのテンプレートをAction Cableでブロードキャストして、Webページ上でリアルタイムに更新する方法を学びます。

Turbo Stream と Action Cable によるリアルタイム更新

Turbo Stream形式は、Action Cableと組み合わせることで、わずか数行のコードでウェブページをリアルタイムに更新することができます。実際の用途としては、例えば、グループチャット、通知、電子メールサービスなどがあります。

電子メールサービスを例にとって考えてみましょう。新しいメールを受信したとき、手動でページを更新して新着情報を確認したくありませんよね。その代わりに、何もしなくても、新鮮なコンテンツでリアルタイムにメールフィードが更新されるようにしたいのです。サーバーサイドで発生した変更を、私たちの側で手動で操作することなく、ブラウザにプッシュさせたいのです。

Railsのバージョン5でAction Cableがリリースされ、Railsでこのリアルタイム動作を実装することが容易になりました。本章で説明するTurbo Railsの一部は、Action Cableの上に構築されています。Railsでのリアルタイム動作の実装がさらに簡単になり、しかも必要なコードも非常に少なくなりました。

この章で作成するもの

複数のユーザーが見積もりエディタを使用することを想像してみましょう。彼らは同僚が取り組んでいることのリアルタイムの更新を見たいと思います。

同僚が見積を作成するたびに、リアルタイムで見積リストに追加されるようにしたい

同僚が見積を更新するたびに、その更新がリアルタイムで見積の一覧に反映されるのを見たい

同僚が見積を削除するたびに、リアルタイムで見積の一覧から削除されるようにしたい

Turbo Streamsで作成した見積書をブロードキャストする

code:ruby

# app/models/quote.rb

class Quote < ApplicationRecord

# All the previous code

after_create_commit -> { broadcast_prepend_to "quotes", partial: "quotes/quote", locals: { quote: self }, target: "quotes" }

end

このコードの行を一緒に分解してみましょう。今は意味がわからなくても、後でブラウザで実験してみればはっきりするでしょう。

これは具体的にはどういうことでしょうか？

code:html

<turbo-stream action="prepend" target="quotes">

<template>

<turbo-frame id="quote_123">

<!-- The HTML for the quote partial -->

</turbo-frame>

</template>

</turbo-stream>

唯一の違いは、今回はAJAXリクエストに応答するのではなく、WebSocket経由でHTMLが配信されることです。

----------

----------

code:erb

<%# app/views/quotes/index.html.erb %>

<%= turbo_stream_from "quotes" %>

<%# 以前書いたすべてのHTMLマークアップ %>

code:html

<turbo-cable-stream-source

channel="Turbo::StreamsChannel"

signed-stream-name="very-long-string"

</turbo-cable-stream-source>

では、すべてが期待通りに動作することをテストしてみましょう。コードが期待通りに動作することを手動でテストする方法は2つあり、その両方を調べます。

コンソールでのTurbo Streamsのテスト

----------

注: コンソールでテストを開始する前に、アプリケーションで Redis が適切に設定されていることを確認する必要があります。

code:yaml

# config/cable.yml

development:

adapter: redis

url: redis://localhost:6379/1

# All the rest of the file

もしそうなら、この注の残りは読み飛ばしていただいて結構です。

----------

テストを実行するために、ブラウザでQuotes#indexページを開いてみましょう。すべてが正しく「配線」されていることをテストする最初の方法は、railsコンソールを開いて新しい見積を作成することです。

code:ruby

Quote.create!(name: "ブロードキャストされた見積")

これを実行すると、コンソールログに何が表示されるでしょうか。まず、見積の作成そのものです。

code:txt

TRANSACTION (0.1ms) begin transaction

TRANSACTION (0.8ms) commit transaction

見ての通り、データベースに見積が作成され、トランザクションがコミットされました。しかし、何か新しいことが起こっています。コンソールに次のような行が表示されるはずです。

code:txt

Rendered quotes/_quote.html.erb (Duration: 0.5ms | Allocations: 285)

これは非常に多くのテキストですが、非常に興味深い部分があります。

https://scrapbox.io/files/6302cdd15ab7b3001fd86f2e.png

ここで、同僚が新しい見積を作成することを想像してみましょう。

https://scrapbox.io/files/6302cee363146f001d5b6d6c.png

これら2行のコードは、以下のスケッチで説明されています:

https://scrapbox.io/files/6302cf21ab623500203ef847.png

Action Cable 上に構築された Turbo Rails のおかげで、これらの変更は、正しいストリーム名で正しいチャンネルを購読しているすべてのユーザーにリアルタイムで反映されます。変更を確認するためにページをリフレッシュする必要はありませんでした! たった 2 行のコードで、私たちのアプリケーションをリアルタイムのものにしたのです！

2つのブラウザウィンドウでTurbo Streamsをテストする

すべてが期待通りに動作していることをテストするもう一つの方法は、Quotes#indexページで2つのブラウザウィンドウを開いて並べて置くことです。2つのウィンドウのうち1つで、見積書を作成します。ページを更新しなくても、もう一方のウィンドウにすぐに変更が反映されることが確認できるはずです。

このように、私たちのアプリケーションは期待通りのリアクティブさを発揮しています！

Turbo Streamsの規約と糖衣構文

code:ruby

# app/models/quote.rb

class Quote < ApplicationRecord

# All the previous code

after_create_commit -> { broadcast_prepend_to "quotes", partial: "quotes/quote", locals: { quote: self }, target: "quotes" }

end

code:ruby

# app/models/quote.rb

class Quote < ApplicationRecord

# All the previous code

after_create_commit -> { broadcast_prepend_to "quotes", partial: "quotes/quote", locals: { quote: self } }

end

これらはまさに、オプションとして渡した値です。したがって、以下のコードは以前と同じです。

code:ruby

# app/models/quote.rb

class Quote < ApplicationRecord

# All the previous code

after_create_commit -> { broadcast_prepend_to "quotes" }

end

Ruby on Railsの規約を利用して、2行の（非常に短い）コードでアプリケーションをリアルタイムにすることができました！

これでTurbo Streamsの仕組みが理解できたので、Quoteモデルに対するリアルタイムCRUDを完成させるのは簡単でしょう。

Turbo Streamsで見積の更新をブロードキャストする

リアルタイムでの見積もり作成機能が動作するようになったので、同じ機能を見積の更新についても追加してみましょう。

見積の更新もブロードキャストするようにモデルに指示しましょう。

code:ruby

# app/models/quote.rb

class Quote < ApplicationRecord

# All the previous code

after_create_commit -> { broadcast_prepend_to "quotes" }

after_update_commit -> { broadcast_replace_to "quotes" }

end

以上です。コンソールや2つのブラウザウィンドウでテストすると、すでに動作します! どのように動作するかを理解するために、railsのコンソールでテストしてみましょう。

code:ruby

Quote.first.update!(name: "Update from console")

先ほどと同じように、見積を作成すると、コンソールログに見積がデータベースで更新され、トランザクションがコミットされたことが表示されます。

code:txt

TRANSACTION (0.0ms) begin transaction

TRANSACTION (1.6ms) commit transaction

code:txt

Rendered quotes/_quote.html.erb (Duration: 0.6ms | Allocations: 285)

https://scrapbox.io/files/6302d3f7b1b4b6001de22758.png

受信したHTMLはターボに横取りされ、見積カードが入れ替わります:

https://scrapbox.io/files/6302d48192e771001d2be4fb.png

最後に実装したい機能は、ユーザが見積を削除したときに、アプリケーションをリアルタイムにすることです。これは次のセクションで行います。

Turbo Streamsで見積もり削除をブロードキャストする

データベースから見積が削除されたときに変更をブロードキャストするように、Quoteモデルに指示してみましょう。先ほどと同様に、これはモデル上のコールバックを使用して行われます。

code:rb

# app/models/quote.rb

class Quote < ApplicationRecord

# All the previous code

after_create_commit -> { broadcast_prepend_to "quotes" }

after_update_commit -> { broadcast_replace_to "quotes" }

after_destroy_commit -> { broadcast_remove_to "quotes" }

end

早速、この機能をrailsコンソールでテストして、期待通りに動作することを確認しましょう。ローカルデータベースに破壊できる見積書があることを確認し、以下のコマンドを実行してみましょう。

code:ruby

Quote.last.destroy!

ブラウザで確認できるように、期待通りに動作しています! ログを解析して、その理由を理解しましょう。

code:txt

TRANSACTION (0.1ms) begin transaction

TRANSACTION (1.4ms) commit transaction

code:txt

https://scrapbox.io/files/63037e37356d7c001ebec17c.png

https://scrapbox.io/files/63037ec415e5c0001f4f6d07.png

見積もりモデルでのリアルタイムCRUDを完成させました。これはエキサイティングです！

この章を終えて次の章に行く前に、パフォーマンスについて話しておく必要があります。

ActiveJobでブロードキャストを非同期にする

私たちのQuoteモデルは現在以下のような感じです。

code:ruby

# app/models/quote.rb

class Quote < ApplicationRecord

# これまで書いたすべてのコード

after_create_commit -> { broadcast_prepend_to "quotes" }

after_update_commit -> { broadcast_replace_to "quotes" }

after_destroy_commit -> { broadcast_remove_to "quotes" }

end

ブロードキャスト部分をバックグラウンドジョブで非同期化することで、このコードのパフォーマンスを向上させることができる。そのためには、コールバックの内容を更新して、非同期の同等のものを使用すればよい。

code:ruby

# app/models/quote.rb

class Quote < ApplicationRecord

# これまで書いたすべてのコード

after_create_commit -> { broadcast_prepend_later_to "quotes" }

after_update_commit -> { broadcast_replace_later_to "quotes" }

after_destroy_commit -> { broadcast_remove_to "quotes" }

end

----------

----------

違いを見るために、railsコンソールを開いて、新しい見積もりを作成してみましょう。

code:ruby

Quote.create!(name: "匿名の見積")

code:txt

Enqueued Turbo::Streams::ActionBroadcastJob (Job ID: 1eecd0c8-53fd-43ed-af8a-073b7d85c2fe) to Async(default) with arguments: "quotes", {:action=>:prepend, :target=>"quotes", :targets=>nil, :locals=>{:quote=>#<GlobalID:0x00007f9a39e861a8 @uri=#<URI::GID gid://hotwire-course/Quote/908005756>>}, :partial=>"quotes/quote"}

code:txt

Performing Turbo::Streams::ActionBroadcastJob (Job ID: 1eecd0c8-53fd-43ed-af8a-073b7d85c2fe) from Async(default) enqueued at 2021-10-16T17:24:32Z with arguments: "quotes", {:action=>:prepend, :target=>"quotes", :targets=>nil, :locals=>{:quote=>#<GlobalID:0x00007f9a3e03a630 @uri=#<URI::GID gid://hotwire-course/Quote/908005756>>}, :partial=>"quotes/quote"}

Turbo Streamを非同期でブロードキャストすることは、パフォーマンス上の理由から好ましい方法です。

さらなる糖衣構文

code:ruby

# app/models/quote.rb

class Quote < ApplicationRecord

# これまで書いたすべてのコード

# after_create_commit -> { broadcast_prepend_later_to "quotes" }

# after_update_commit -> { broadcast_replace_later_to "quotes" }

# after_destroy_commit -> { broadcast_remove_to "quotes" }

# Those three callbacks are equivalent to the following single line

broadcasts_to ->(quote) { "quotes" }, inserts_by: :prepend

end

私たちの最終的なQuoteモデルの実装は以下のようになります:

code:ruby

# app/models/quote.rb

class Quote < ApplicationRecord

# これまで書いたすべてのコード

broadcasts_to ->(quote) { "quotes" }, inserts_by: :prepend

end

まとめ

Turbo Railsのおかげで、このアプリケーションをリアルタイムに変換するのに必要なコードはわずか2行でした。

あとはTurboがすべて処理してくれるので、Ruby on Railsアプリケーションを快適に操作することができます。

次の章では、Turbo Streamsとセキュリティについて説明します。プライベートなデータを間違ったユーザーにブロードキャストしないようにするために、Turbo Streamsでどのようにセキュリティが機能するかを説明します。

次: